<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      :columns="columns"
      :request-api="getTableList"
      :init-param="initParam"
      :data-callback="dataCallback"
      @darg-sort="sortTable"
    >
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="systemLog">
import { ref, reactive } from "vue";
import { Log } from "@/api/interface";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { ElMessage } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getLogLevel, getLogList, getRequestMethod } from "@/api/modules/log";

// ProTable 实例
const proTable = ref<ProTableInstance>();

// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ type: 1 });

// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
  console.log(data);
  return {
    list: data.list,
    total: data.total,
    pageNum: data.pageNum,
    pageSize: data.pageSize
  };
};

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
  console.log(params);
  let newParams = JSON.parse(JSON.stringify(params));
  console.log(newParams);
  newParams.timestamp && (newParams.startTime = newParams.timestamp[0]);
  newParams.timestamp && (newParams.endTime = newParams.timestamp[1]);
  delete newParams.timestamp;
  console.log(newParams);
  return getLogList(newParams);
};

// 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
const { BUTTONS } = useAuthButtons();
console.log(BUTTONS);
console.log(BUTTONS.value);

// const formatDateTime = (date: Date): String => {
//   const year = date.getFullYear();
//   const month = (date.getMonth() + 1).toString().padStart(2, "0");
//   const day = date.getDate().toString().padStart(2, "0");
//   const hours = date.getHours().toString().padStart(2, "0");
//   const minutes = date.getMinutes().toString().padStart(2, "0");
//   const seconds = date.getSeconds().toString().padStart(2, "0");
//
//   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
// };

// 表格配置项
const columns = reactive<ColumnProps<Log.ResLogList>[]>([
  {
    prop: "timestamp",
    label: "产生时间",
    width: 200,
    search: {
      el: "date-picker",
      span: 2,
      props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" }
      // defaultValue: ["", formatDateTime(new Date())]
    }
  },
  {
    prop: "logLevel",
    label: "级别",
    enum: getLogLevel,
    search: { el: "select", props: { filterable: true } },
    fieldNames: { label: "logLabel", value: "logValue" },
    render: scope => {
      let tagType = ""; // 默认类型

      switch (scope.row.logLevel) {
        case "success":
          tagType = "success";
          break;
        case "INFO":
          tagType = "info";
          break;
        case "warning":
          tagType = "warning";
          break;
        case "ERROR":
          tagType = "danger";
          break;
        // 可以根据具体情况添加更多的级别和对应的颜色
        default:
          break;
      }

      return <el-tag type={tagType}>{scope.row.logLevel}</el-tag>;
    }
  },
  { prop: "username", label: "操作人", search: { el: "input" } },
  {
    // 多级 prop
    prop: "requestMethod",
    label: "请求类型",
    enum: getRequestMethod,
    fieldNames: { label: "methodLabel", value: "methodValue" },
    search: { el: "select", props: { filterable: true } }
  },
  { prop: "requestUrl", label: "请求url", search: { el: "input" } },
  { prop: "ipAddress", label: "请求ip地址" }
]);

// 表格拖拽排序
const sortTable = ({ newIndex, oldIndex }: { newIndex?: number; oldIndex?: number }) => {
  console.log(newIndex, oldIndex);
  console.log(proTable.value?.tableData);
  ElMessage.success("修改列表排序成功");
};
</script>
